
import Singleton from "../context/Singleton";
import Sprite = Laya.Sprite;
import Stage = Laya.Stage;
import HitArea = Laya.HitArea;
import WebGL = Laya.WebGL;
import AppConfig from "../config/AppConfig";
import PathConfig from "../config/PathConfig";
import UIManage from "../gui/UIManage";
import Utils from "../utils/Utils";

export class GuideManage extends Laya.Sprite {

    static uo: GuideManage;

    static show() {
        if (Utils.isNil(this.uo)) {
            new GuideManage();
        }
        UIManage.Instance().guideLayer.addChild(this.uo);
        Laya.Tween.from(this.uo, { alpha: 0 }, 200);
    }

    static hide() {
        if (!this.uo) return;

        this.uo.clear();
    }

    //====================================================

    private guideContainer: Sprite;
    private tipContainer: Sprite;

    private guideSteps: Array<any> =
        [
            { x: 151, y: 575, radius: 150, tipx: 200, tipy: 250 },
            { x: 883, y: 620, radius: 100, tipx: 730, tipy: 380 },
            { x: 1128, y: 583, radius: 110, tipx: 900, tipy: 300 }
        ];
    private guideStep: number = 0;
    private interactionArea: Sprite;

    constructor() {
        super();
        GuideManage.uo = this;

        this.width = Laya.stage.width;
        this.height = Laya.stage.height;

        //绘制一个蓝色方块，不被抠图
        var gameContainer: Sprite = new Sprite();
        gameContainer.loadImage(PathConfig.RES_URL + "guide/guide_jiantou2.png");
        this.addChild(gameContainer);

        // 引导所在容器
        this.guideContainer = new Sprite();
        // 设置容器为画布缓存
        this.guideContainer.cacheAs = "bitmap";
        this.addChild(this.guideContainer);
        gameContainer.on("click", this, this.nextStep);

        //绘制遮罩区，含透明度，可见游戏背景
        var maskArea: Sprite = new Sprite();
        maskArea.alpha = 0.5;
        maskArea.graphics.drawRect(0, 0, Laya.stage.width, Laya.stage.height, "#000000");
        this.guideContainer.addChild(maskArea);

        //绘制一个圆形区域，利用叠加模式，从遮罩区域抠出可交互区
        this.interactionArea = new Sprite();
        //设置叠加模式
        this.interactionArea.blendMode = "destination-out";
        this.guideContainer.addChild(this.interactionArea);

        this.hitArea = new HitArea();
        this.hitArea.hit.drawRect(0, 0, Laya.stage.width, Laya.stage.height, "#000000");

        this.guideContainer.hitArea = this.hitArea;
        this.guideContainer.mouseEnabled = true;

        this.tipContainer = new Sprite();
        Laya.stage.addChild(this.tipContainer);

        this.nextStep();
    }

    private clear() {
        this.removeSelf();

        this.timer.once(10000, this, () => {
            GuideManage.uo = null;
            this.destroy();
        })
    }

    private nextStep(): void {
        if (this.guideStep == this.guideSteps.length) {
            Laya.stage.removeChild(this.guideContainer);
            Laya.stage.removeChild(this.tipContainer);
        }
        else {
            var step: any = this.guideSteps[this.guideStep++];

            this.hitArea.unHit.clear();
            this.hitArea.unHit.drawCircle(step.x, step.y, step.radius, "#000000");

            this.interactionArea.graphics.clear();
            this.interactionArea.graphics.drawCircle(step.x, step.y, step.radius, "#000000");

            this.tipContainer.graphics.clear();
            // this.tipContainer.loadImage(step.tip);
            this.tipContainer.pos(step.tipx, step.tipy);
        }
    }
}



